<template>
  <div>
    <el-dialog
      title="修改档案"
      width="35%"
      :before-close="handleClose"
      :visible="dialogVisible"
      top="3vh"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" prefix-icon="el-icon-notebook-2" placeholder="请输入登陆账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input placeholder="请输入新密码" prefix-icon="el-icon-lock" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="签名">
          <el-input
            prefix-icon="el-icon-edit-outline"
            v-model="form.signature"
            placeholder="请输入个性签名"
          ></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://www.yemengshen.cn/upload/image"
            :data="params"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imgUrl" :src="imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clickcanel">取 消</el-button>
        <el-button type="primary" @click="clickdetermine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from '../../api/request'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dialogVisible: true,
      imgUrl: '',
      _id: '',
      form: {
        userName: '',
        account: '',
        passWord: '',
        newPassWord: '',
        signature: ''
      },
      date: '',
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输登陆账号', trigger: 'blur' },
          { min: 3, message: '长度至少3个字符', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输登陆账号', trigger: 'blur' },
          { min: 5, message: '长度至少 5 个字符', trigger: 'blur' }
        ]
      },
      params: {
        savePath: 'avatars',
        token: ''
      }
    }
  },
  computed: {
    ...mapGetters(['getAdmin', 'getToken'])
  },
  created() {
    this.form.userName = this.getAdmin.userName
    this.form.account = this.getAdmin.account
    this.form.passWord = this.getAdmin.passWord
    this.form.signature = this.getAdmin.signature || '这个家伙很懒，没有写签名'
    this._id = this.getAdmin._id
    this.date = this.getAdmin.date || ''
    this.imgUrl = this.getAdmin.photo || ''

    this.params.token = this.getToken
  },
  methods: {
    // upload组件的事件（图片上传成功时触发）
    handleAvatarSuccess(res, file) {
      this.imgUrl = res.imgUrl
    },
    // upload组件的事件(在上传之前)
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg"
    //   const isLt2M = file.size / 1024 / 1024 < 2
    //   if (!isJPG) {
    //     this.$message.error("上传头像图片格式错误(jpeg,png,img)!")
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!")
    //   }
    //   return isJPG && isLt2M
    // },
    // 覆盖upload组件的action,自定义上传的方法
    // async handleHttpRequest(a) {
    //   var formdata = new FormData()
    //   formdata.append("file", a.file)
    //   let savePath = "avatars"
    //   formdata.append("savePath", savePath)
    //   console.log(formdata)
    //   let config = {
    //     headers: {
    //       "Content-Type": "multipart/form-data",
    //     },
    //   }
    //   let res = await request(
    //     {
    //       url: "/upload/avatars",
    //       // data: {
    //       //   file: formdata,
    //       //   savePath: "avatars",
    //       // },
    //       data: formdata,
    //       method: "post",
    //     },
    //     config
    //   )
    //   if (res.imgurl) {
    //     this.imgUrl = res.imgUrl
    //   }
    // },

    // 点击×号触发的事件
    handleClose(done) {
      this.$emit('close')
    },
    // 点击取消按钮触发的事件
    clickcanel() {
      this.$emit('close')
    },
    // 点击修改按钮触发的事件
    clickdetermine() {
      if (this.form.newPassWord) {
        if (this.form.newPassWord.length > 5) {
          this.form.passWord = this.form.newPassWord
          this.$emit('handleFile', {
            userName: this.form.userName,
            account: this.form.account,
            passWord: this.form.passWord,
            signature: this.form.signature,
            date: this.date,
            photo: this.imgUrl,
            _id: this._id
          })
        } else {
          this.$message.error('新密码长度不足5')
        }
      } else {
        this.$emit('handleFile', {
          userName: this.form.userName,
          account: this.form.account,
          passWord: this.form.passWord,
          signature: this.form.signature,
          date: this.date,
          photo: this.imgUrl,
          _id: this._id
        })
      }
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.el-form {
  margin: 0px 20px;
}
</style>
